<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- 引入bootstrap的css文件 -->
    <link
      rel="stylesheet"
      href="../bootstrap-5.2.3-dist/css/bootstrap.min.css"
    />
    <!-- 引入自定义css文件 -->
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- 导航部分 -->
    <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">Just do it</a>
        <!-- 导航栏收起时的按钮 -->
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mb-2 mb-lg-0 ms-auto">
            <li class="nav-item me-2">
              <a class="nav-link" href="#my-card-1">前端知识</a>
            </li>
            <li class="nav-item me-2">
              <a class="nav-link" href="#my-card-2">后端知识</a>
            </li>

            <li class="nav-item me-2">
              <a class="nav-link" href="#my-card-3">数据库知识</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- 第一层 -->
    <section class="p-5 bg-dark text-light text-center text-sm-start">
      <div class="container">
        <!-- 弹性布局 -->
        <div class="d-flex">
          <div>
            <h1>成为一个<span class="text-warning">前端工程师</span></h1>
            <p class="my-4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima,
              rerum optio. Facilis vero accusamus aut reprehenderit dicta unde
              recusandae aliquam a adipisci, harum nobis quibusdam accusantium,
              fuga, illum quisquam laborum. Lorem ipsum dolort! Lorem, ipsum
              dolor sit amet consectetur adipisicing elit. Quaerat,
              exercitationem iure ea atque animi nostrum, sunt facere amet
              dolore reiciendis labore voluptates eligendi aspernatur eius vero
              cumque ab porro rerum.
            </p>
            <button class="btn btn-primary btn-lg">开始编程之旅</button>
          </div>

          <!-- 图片 -->
          <img
            src="../img/showcase.svg"
            alt="img"
            class="w-50 d-none d-md-block"
          />
        </div>
      </div>
    </section>

    <!-- 第二层 注册 -->
    <section class="p-5 bg-primary text-light text-center text-sm-start">
      <div class="container">
        <div class="d-md-flex justify-content-between align-items-center">
          <h3 class="mb-4 mb-md-0">没有账号？此处立即注册</h3>

          <div class="input-group ms-auto my-input">
            <input
              type="text"
              class="form-control"
              placeholder="请输入你的邮箱"
            />
            <button class="btn btn-dark btn-lg">注册</button>
          </div>
        </div>
      </div>
    </section>
    <!-- 第二层 卡片 -->
    <section class="p-5">
      <div class="container">
        <div class="row g-4">
          <div class="col-md" id="my-card-1">
            <div class="card bg-dark text-light">
              <div class="card-body text-center">
                <div class="card-title">前端知识</div>
                <div class="card-text">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                  Minus voluptatibus consequuntur vitae quo quibusdam
                </div>
                <a href="#" class="btn btn-primary mt-2">学习前端</a>
              </div>
            </div>
          </div>
          <div class="col-md" id="my-card-2">
            <div class="card bg-secondary text-light">
              <div class="card-body text-center">
                <div class="card-title">后端知识</div>
                <div class="card-text">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                  Minus voluptatibus consequuntur vitae quo quibusdam
                </div>
                <a href="#" class="btn btn-dark mt-2">学习后端</a>
              </div>
            </div>
          </div>
          <div class="col-md" id="my-card-3">
            <div class="card bg-dark text-light">
              <div class="card-body text-center">
                <div class="card-title">数据库知识</div>
                <div class="card-text">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                  Minus voluptatibus consequuntur vitae quo quibusdam
                </div>
                <a href="#" class="btn btn-primary mt-2">学习数据库</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 第三层-->
    <section class="p-5">
      <div class="container">
        <div class="row justify-content-between align-items-center">
          <div class="col-md">
            <img src="../img/1.svg" alt="1" class="img-fluid" />
          </div>
          <div class="col-md p-5">
            <h2>课程介绍</h2>
            <p class="lead">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
              autem dolos repudiandae facere. Magni dolores ad exercitationem
              quo eum nemo?
            </p>
            <p>
              Lorem ipsum dolor sit amet consectelo Lorem ipsum, dolor sit amet
              consectetur e,dasc Lorem ipsum dolor sit amet, consectetur
              adipisicing elit. Reprehenderit repellendus rerum, natus
              cupiditate, illo deserunt repudiandae nobis rem magni possimus
              corporis, cum architecto harum iusto! Repellendus illo nostrum
              eius non? quo quis asperiores, commodi voluptatibus porro
              doloribus nisi pariatur id at eveniet molestias harum architecto.
            </p>
            <a href="" class="btn btn-light">查看更多</a>
          </div>
        </div>
      </div>
    </section>
    <!-- 第四层-->

    <section class="p-5 bg-dark text-light">
      <div class="container">
        <div class="row justify-content-between align-items-center">
          <div class="col-md p-5">
            <h2>课程介绍</h2>
            <p class="lead">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
              autem dolos repudiandae facere. Magni dolores ad exercitationem
              quo eum nemo?
            </p>
            <p>
              Lorem ipsum dolor sit amet consectelo Lorem ipsum, dolor sit amet
              consectetur e,dasc Lorem ipsum dolor sit amet, consectetur adipisi
              quo quis asperiores, commodi voluptatibus porro doloribus nisi
              pariatur id at eveniet molestias harum architecto.
            </p>
            <a href="" class="btn btn-light">查看更多</a>
          </div>

          <div class="col-md">
            <img src="../img/2.svg" alt="1" class="img-fluid" />
          </div>
        </div>
      </div>
    </section>

    <!-- 第五层-->
    <section class="p-5">
      <div class="container">
        <h3 class="text-center mb-3">常见问题</h3>

        <div class="accordion accordion-flush" id="accordionFlushExample">
          <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingOne">
              <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#flush-collapseOne"
                aria-expanded="false"
                aria-controls="flush-collapseOne"
              >
                Accordion Item #1
              </button>
            </h2>
            <div
              id="flush-collapseOne"
              class="accordion-collapse collapse"
              aria-labelledby="flush-headingOne"
              data-bs-parent="#accordionFlushExample"
            >
              <div class="accordion-body">
                Placeholder content for this accordion, which is intended to
                demonstrate the <code>.accordion-flush</code> class. This is the
                first item's accordion body.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingTwo">
              <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#flush-collapseTwo"
                aria-expanded="false"
                aria-controls="flush-collapseTwo"
              >
                Accordion Item #2
              </button>
            </h2>
            <div
              id="flush-collapseTwo"
              class="accordion-collapse collapse"
              aria-labelledby="flush-headingTwo"
              data-bs-parent="#accordionFlushExample"
            >
              <div class="accordion-body">
                Placeholder content for this accordion, which is intended to
                demonstrate the <code>.accordion-flush</code> class. This is the
                second item's accordion body. Let's imagine this being filled
                with some actual content.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingThree">
              <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#flush-collapseThree"
                aria-expanded="false"
                aria-controls="flush-collapseThree"
              >
                Accordion Item #3
              </button>
            </h2>
            <div
              id="flush-collapseThree"
              class="accordion-collapse collapse"
              aria-labelledby="flush-headingThree"
              data-bs-parent="#accordionFlushExample"
            >
              <div class="accordion-body">
                Placeholder content for this accordion, which is intended to
                demonstrate the <code>.accordion-flush</code> class. This is the
                third item's accordion body. Nothing more exciting happening
                here in terms of content, but just filling up the space to make
                it look, at least at first glance, a bit more representative of
                how this would look in a real-world application.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 第六层 讲师-->
    <section class="p-5 bg-primary text-center text-light">
      <div class="container">
        <h3>讲师介绍</h3>
        <p class="lead">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum
          consequatur cempora atque!
        </p>

        <div class="row">
          <div class="col-md-6 col-lg-3 my-2">
            <div class="card bg-light">
              <div class="card-body text-dark">
                <img src="../img/01-man.jpeg" alt="1" class="rounded-circle" />
                <h3 class="card-title mt-2">Joe</h3>
                <p class="card-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  RepudianLorem ipsum dolor sit amet consectetur adipisicing
                  elit. Repudian ipsum itaque qu ipsum itaque quam similique
                  omnis cum.
                </p>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-3 my-2">
            <div class="card bg-light">
              <div class="card-body text-dark">
                <img src="../img/02-man.jpeg" alt="1" class="rounded-circle" />
                <h3 class="card-title mt-2">Tim</h3>
                <p class="card-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  RepudianLorem ipsum dolor sit amet consectetur adipisicing
                  elit. Repudian ipsum itaque qu ipsum itaque quam similique
                  omnis cum.
                </p>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-3 my-2">
            <div class="card bg-light">
              <div class="card-body text-dark">
                <img src="../img/03-man.jpeg" alt="1" class="rounded-circle" />
                <h3 class="card-title mt-2">Mark</h3>
                <p class="card-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  RepudianLorem ipsum dolor sit amet consectetur adipisicing
                  elit. Repudian ipsum itaque qu ipsum itaque quam similique
                  omnis cum.
                </p>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-3 my-2">
            <div class="card bg-light">
              <div class="card-body text-dark">
                <img src="../img/04-man.jpeg" alt="1" class="rounded-circle" />
                <h3 class="card-title mt-2">David</h3>
                <p class="card-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  RepudianLorem ipsum dolor sit amet consectetur adipisicing
                  elit. Repudian ipsum itaque qu ipsum itaque quam similique
                  omnis cum.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 第七层 信息-->
    <section class="p-5">
      <div class="container">
        <h2 class="text-center mb-4">联系我们</h2>

        <ul class="list-group list-group-flush">
          <li class="list-group-item">电话：120XXXXXX</li>
          <li class="list-group-item">邮箱： bilibil@bili.com</li>
          <li class="list-group-item">地址：上海市XXXX区</li>
        </ul>
      </div>
    </section>

    <!-- 第八层-->
    <section class="p-5 bg-dark text-light text-center">
      <div class="container">
        <p class="lead">Copyright &copy; 2021 我在B站玩編程</p>
      </div>
    </section>

    <!-- 引入bootstrap的js文件 -->
    <script src="../bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
  </body>
</html>
